/*项目信息统计 */
<template>
  <div>
    <condition-card @reset="reset" @search="onSubmit" label-position="right" label-width="150px">
      <el-row :gutter="24" style="height: 50px;">
        <el-col :span="8">
          <el-form-item :label="$t('collegeFirstTrial.year')">
            <el-date-picker style="width:100%"
              v-model="queryForm.condition.year"
              type="year" value-format="yyyy" format="yyyy">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('projectInformationStatistics.college')">
            <DictSelect v-model="queryForm.condition.college" filterable :data="options.faculty" :plzSelect="true"></DictSelect>          
          </el-form-item>
        </el-col><!-- 学院 -->  
        <el-col :span="8">
          <el-form-item :label="$t('projectInformationStatistics.competitionName')">
            <el-input v-model.trim="queryForm.condition.name" style="width:100%"></el-input>
            <!-- <el-select collapse-tags  v-model="queryForm.condition.name"  filterable clearable  style="width: 100%">
              <el-option  v-for="item in options.profession" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select> -->
          </el-form-item>
        </el-col><!-- 竞赛名称 -->
        <el-col :span="8">
          <el-form-item :label="$t('projectInformationStatistics.competitionLevel')">
            <el-select v-model="queryForm.condition.comLevel"  clearable style="width: 100%">
              <el-option v-for="item in options.degreeType" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col><!-- 竞赛级别 -->
        <el-col :span="8">
          <el-form-item :label="$t('projectInformationStatistics.projectLeader')">
            <el-select
                      v-model="queryForm.condition.comManager"
                      filterable
                      remote
                      style="width:100%"
                      clearable
                      reserve-keyword
                      :placeholder="$t('collegeSetup.numberQuery')"
                      :remote-method="remoteMethodOne"
                      >
                      <el-option v-for="item in options.approver"
                          :key="item.code"
                          :label="item.name"
                          :value="item.code" >
                    
                      <!-- <span style="float: left">{{ item.name }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px" >{{ item.code }}</span> -->
                      </el-option>
                    </el-select>
          </el-form-item>
        </el-col><!-- 项目负责人 -->
        <el-col :span="8">
          <el-form-item :label="$t('projectInformationStatistics.courseOpening')">
            <el-input
              v-model="queryForm.condition.course" 
              clearable
              :placeholder="$t('projectInformationStatistics.pleaseEnter')" 
              style="width: 100%">
            </el-input>
          </el-form-item>
        </el-col><!-- 开课课程 -->
      </el-row><!-- 第二行 -->
    </condition-card>



    <el-card shadow="never" v-loading="loading" body-style="padding: 24px;" class="card-margin">
      <h1 class="condition-title">{{$t('projectInformationStatistics.statisticalListOfProjectInformation')}}</h1>
        <el-row style="padding:15px;" class="row-bg" justify="space-between">
          <el-button
              type="primary"
              style="float:right; margin-left:10px;"
              @click="exportFile"
            >{{$t('projectInformationStatistics.export')}}</el-button>
        </el-row>
        
      <edu-table :pagination="false" :selection='false' :tooltipEffect="tooltipEffect" stripe :data="dataList" size="mini" @selection-change="handleSelectionChange">
        <edu-table-column :label="$t('projectInformationStatistics.college')" prop="facultyI18N"></edu-table-column>
          <edu-table-column :label="$t('projectInformationStatistics.competitionName')" prop="name">
            <!-- <template slot-scope="props">
              <span v-if="props.row.sex == '2'">女</span>
              <span v-if="props.row.sex == '1'">男</span>
            </template> -->
          </edu-table-column>
          <edu-table-column :label="$t('projectInformationStatistics.competitionLevel')" prop="comLevel">
            <template slot-scope="props">
              {{props.row.comLevel | collegeAcademyList(options.degreeType)}}
            </template>
          </edu-table-column>
          <edu-table-column :label="$t('projectInformationStatistics.projectLeader')" prop="comManagerName"></edu-table-column>
          <edu-table-column :label="$t('projectInformationStatistics.openingTimes')" prop="courseNumber"></edu-table-column>
          <edu-table-column :label="$t('projectInformationStatistics.courseOpening')" prop="course"></edu-table-column>   
          <edu-table-column :label="$t('projectInformationStatistics.totalAmount')" prop="approvedBudget"></edu-table-column>

      </edu-table>
      <el-row type="flex" class="row-bg" justify="end">
        <el-col>
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryForm.pageNum_"
              :page-sizes="[20, 40, 80, 100]"
              :page-size="queryForm.pageSize_"
              layout="total, sizes, prev, pager, next, jumper"
              :total="queryForm.total_"
              style="float:right;margin-top:10px"
            ></el-pagination>
        </el-col>
      </el-row>
    </el-card>
    <edu-export-dialog
        :disabled="exportButton"
        :title="$t('message.prompt')"
        ref="downloadRef"
        :data="exportResult">
      </edu-export-dialog>
  </div>
</template>
<script>
import { queryDic } from "common/src/api/dictionary";
import UTILS from "common/src/utils/utils";
import { findTeacherInfoList } from 'common/src/api/studentinfo'
import competiManagementApi from 'common/src/api/subjectCompetition/competiManagement';
export default {
  data () {
    return {
      queryForm: {
        pageNum_: 1,
        pageSize_: 20,
        total_: 0,
        condition:{
          // year: new Date().getFullYear(),
          year: new Date().getFullYear()+'',
          college: '', // 学院
          name: '', // 竞赛名称
          comLevel: '', // 竞赛级别
          comManager: '', // 项目负责人
          course: '' // 开课课程

        }
      },
      options: {
        faculty: [], // 学院
        approver: [],
        profession: [], // 竞赛名称
        degreeType: [ ] // 竞赛级别
      },

      titleList: '',
      fileList: [],
      showDate: true,
      addflag: false,
      tableFlag: false,
      peopleadd: {},
      dataQueryForm: {},
      curRow: {},
      ifDetials: false,
      copyDialog: false,
      curCalendarId: '',
      isAllDel: true,
      exportButton: false,
      exportResult: null,
      multipleSelection: [],
      formsLearn: [],
      dataList: [],
      breadPath: {
        label: this.$t('graduate.graduate'),
        key: "1",
        children: [
          {
            key: "2",
            label: ""
          }
        ]
      },
    }
  },
  mounted() {
    this.getOptions() 
    this.postProjectInform(this.queryForm)
  },
  filters: {
    collegeAcademyList(val, array) {
      let str = "";
      for (let item of array) {
        if (val === item.value) {
          str = item.label;
        }
      }
      return str;
    }
  },
  methods: {
    // 字典获取
    getOptions() {
      // 筛选条件字典查询
      let data = {
        lang: this.$store.getters.language || "cn",
        type: "allChild",
        keys: ["X_PYCC", 'X_PYLB', 'X_XWLX', 'X_XXXS', 'X_YX', 'JSGL_JSJB']
      };
      queryDic(data).then(res => {
        UTILS.fillSelect(
          {
            trainingCategory: "X_PYLB",
            degreeType: "JSGL_JSJB",
            formLearning: "X_XXXS",
            faculty: "X_YX",
            TrainingLevel: "X_PYCC"
          },
          res.data,
          this.options
        );
      });
    },
    // 工号改变获取数据
    remoteMethodOne(query) {
        if (!!query) {
            setTimeout(() => {
            findTeacherInfoList({
                condition: query,
                pageSize_: 100,
                pageNum_: 0
            }).then(res => {
                if (res && res.code == 200) {
                    res.data.list.forEach(row => {
                      row.name += '(' + row.code + ')';
                    })
                    this.options.approver = res.data.list
                }
            })
            }, 200);
        } else {
            this.options.approver = []
        }
    },
    postProjectInform(data) {
      this.options.profession = []
      competiManagementApi.projectInformaGetList(data).then(res => {
        this.dataList = res.data.list
        if (this.dataList) {
          this.dataList.forEach(el => {
            this.options.profession.push({
              label: el.name,
              value: el.name
            })
          })
        }
        
        this.queryForm.total_ = res.data.total_
      })
    },
    
    // 筛选
    onSubmit() {
      this.queryForm.pageNum_ = 1
      this.postProjectInform(this.queryForm)
    },
    // 重置
    reset() {
      for (let key in this.queryForm.condition) {
        this.queryForm.condition[key] = '';
      }
      // this.queryForm.condition.year = new Date().getFullYear()+''
      this.options.approver = []
      this.queryForm.pageNum_ = 1
      this.postProjectInform(this.queryForm)
    },
    // 轮询直到获取key值的接口返回
    cycleToGetKey() {
      setTimeout(() => {
        competiManagementApi.projectInformaExport({
          "year": this.queryForm.condition.year,
          "college": this.queryForm.condition.college,
          "name": this.queryForm.condition.name,
          "comLevel": this.queryForm.condition.comLevel,
          "comManager": this.queryForm.condition.comManager
        }).then(res => {
          if (res.success) {
            this.$refs.downloadRef.close();
            this.exportButton = false;
            this.normalDelayRequest(res.key, res.msg);
          } else {
            this.cycleToGetKey();
          }
        });
      }, 3000);
    },
    // 导出异步
    delayRequest(key, name) {
      setTimeout(() => {
        competiManagementApi.downloadGetKey(key, name).then(res => {
          this.exportResult = res.data;
          if (res.code == 200 && res.data.status) {
            this.exportButton = false;
            let path = '/api/competitionservice/competitionExport/file?path=' + res.data.path + '&name=' + name;
            // window.open(path);
            window.location.href = path;
            this.$message.success(this.$t('result.exportSuccessfully'));
            this.$refs.downloadRef.close();
          } else {
            this.delayRequest(key, name);
          }
        });
      }, 3000);
    },
    // Normal导出异步
    normalDelayRequest(key, name) {
      setTimeout(() => {
        competiManagementApi.downloadGetKey(key).then(res => {
          this.exportResult = res.data;
          if (res.code == 200 && res.data.status) {
            this.exportButton = false;
            let path =  '/api/competitionservice/competitionExport/file?path=' + res.data.path + '&name=' + name;
            window.location.href = path;
            this.$message.success(this.$t('result.exportSuccessfully'));
            this.$refs.downloadRef.close();
          } else {
            this.delayRequest(key, name);
          }
        });
      }, 3000);
    },
    //  导出
    exportFile() {
      // 1、第一步：调该接口，获取key值以及msg中的文件名
      // 2、第二步：将key值放入接口传参
      // 3、第三步：传入path值以及name(msg中的文件名)值，下载文件
      this.exportResult = null;
      this.$refs.downloadRef.open();
      this.exportButton = true;
      this.cycleToGetKey();
      
    },
    handleSelectionChange() {

    },
    handleSizeChange(val) {
      this.queryForm.pageSize_ = val
      this.queryForm.pageNum_ = 1
      this.postProjectInform(this.queryForm)
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum_ = val
      this.postProjectInform(this.queryForm)
    }
  }
}
</script>
<style scoped>

</style>